<template lang="pug">
  .swiperpicture
    .swiper-container#swiper2
      .swiper-wrapper
        .swiper-slide(
          v-for='str in listImg'
          :style="{backgroundImage:'url('+str.url+')'}"
        )
          
      slot
</template>
<script>
import Swiper from 'swiper'
export default {
  name: 'swiperpicture',
  props: ['listImg'],
  data() {
    return {
      url: 'https://www.easy-mock.com/mock/5a17dba3b23118413626a5d2/test/test4',
      list: null,
    }
  },
  created() {
    this.getPicture();
  },
  mounted() {
    console.log('mounted', this)
    var swiper2 = new Swiper('#swiper2', {
      autoplay: {
        stopOnLastSlide: true,
        disableOnInteraction: false,
        stopOnLastSlide: false,

      },
      simulateTouch : true,
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
      slidesPerView : 2,
      spaceBetween : 10,
      preventClicks : false,
      loop : true,
      grabCursor : true,

    })
  },
  methods: {
    getPicture() {
      this.$http.get(this.url)
        .then((response) => {
          if (response) {
            console.log(response);
            this.list = response.data.list[0];
          } else {
            console.error('again');
            this.getPicture();
          }
        },(response) => {})
    }
  },

}
</script>
<style lang="scss" scoped>
.swiperpicture {
  width: $width;
  margin-bottom: 1.125rem /* 18/16 */;
  #swiper2 {
    @include swiper-box(37.9375rem /* 607/16 */);
    height: 10.5rem /* 168/16 */;
    .swiper-slide {
      background-position: center;
      background-size: cover;
      width: 16.0625rem /* 257/16 */;
      
    }

  }
}

</style>

